<template>
  <div class="charts-date-pagination">
    <span class="pagination-item" @click="eventDateChange(-1)">
      <x-icon type="ios-arrow-left" size="24" fill="#456DE6"></x-icon>
    </span>
    <span class="pagination-text">
      {{ startTime.format(cycleType === 4 || cycleType === 3 ? "YYYY-MM-DD" : "MM-DD") }}
      <template v-if="cycleType !== 0 && cycleType !== 1">
        ~
        {{
          endTime
            .subtract(1, "date")
            .format(cycleType === 4 || cycleType === 3 ? "YYYY-MM-DD" : "MM-DD")
        }}
      </template>
    </span>
    <span class="pagination-item" @click="eventDateChange(1)">
      <x-icon type="ios-arrow-right" size="24" fill="#456DE6"></x-icon>
    </span>
  </div>
</template>
<script>
export default {
  name: "charts-date-pagination",
  props: {
    startTime: {
      type: Object,
      default: () => ({})
    },
    endTime: {
      type: Object,
      default: () => ({})
    },
    cycleType: {
      type: Number,
      default: 1
    }
  },
  methods: {
    eventDateChange(day) {
      this.$emit("onDateChange", day);
    }
  }
};
</script>
<style lang=""></style>
